<template>
  <div>
    <div>{{ teacher.name }}</div>
    <div>{{ teacher.age }}</div>
    <div>{{ teacher.salary }}</div>
    <button @click="timeFly">过了一年</button>
  </div>
</template>

<script>
//之前的写法 不能这么写了
// document.querySelector('button').addEventListener('click',function(){
//     console.log(1);
// })
export default {
  //该vue组件的数据源
  data() {
    return {
      teacher: {
        name: 'harry',
        age: 28,
        salary: 3000,
      },
    }
  },

  //methods 用来存放事件,methods是一个对象，里面存放了需要触发的事件
  //千万别写成method，事件很多，所以是复数形式后面跟上s
  //事件和事件之间用，隔开
  methods: {
    timeFly() {
      this.teacher.age += 1
      this.teacher.salary += 500
    },
  },
  watch: {
    //监听money的变化，只要money一旦发生改变，就会调用下面的函数
    //要监听复杂数据类型的话，要准确到属性
    'teacher.age'(newVal, oldVal) {
      console.log(newVal)
      console.log(oldVal)
      if (newVal == 60) {
        alert(
          '退休吧，你干不动了' +
            '你都' +
            this.teacher.age +
            '了' +
            '工资才' +
            this.teacher.salary
        )
      }
    },
    //监视整个obj对象(复杂类型)=>复杂类型中的任何一个属性变化了，我都要执行
    //需要深度监视，需要写监视的完整写法
    //深度监视//全24小时，100%监视//非常消耗性能
    teacher: {
      // 组件一加载就会调用一次
      immediate: true,
      //开启深度监听
      deep: true,
      //handler方法
      handler(newVal, oldVal) {
        console.log(newVal, oldVal)
      },
    },
  },
}
// 非业务需求：尽可能不要直接深度监视 => 相对消耗性能
// 如果是业务需求，就需要深度监视，就正常监视即可~
</script>

<style scoped>
.box {
  width: 500px;
  height: 500px;
  background-color: #087;
}
</style>
